import React from "react";
import { Descriptions, Badge } from "antd";
import "antd/es/descriptions/style/css";
import "antd/es/badge/style/css";

const AdminConponent = () => (
  <div>
    <Descriptions title="User Info" layout="vertical" bordered>
      <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
      <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
      <Descriptions.Item label="Automatic Renwal">Yes</Descriptions.Item>
      <Descriptions.Item label="Order Time">
        2020-7-20 09:57:22
      </Descriptions.Item>
      <Descriptions.Item label="Usage Time" span={2}>
        2021-7-20 09:57:22
      </Descriptions.Item>
      <Descriptions.Item label="Status" span={3}>
        <Badge status="processing" text="Runing" />
      </Descriptions.Item>
      <Descriptions.Item label="Negotiated Amount">￥99.00</Descriptions.Item>
      <Descriptions.Item label="Discount">￥10.00</Descriptions.Item>
      <Descriptions.Item label="Official Receipts">￥89.00</Descriptions.Item>
      <Descriptions.Item label="Config Info">
        Data disk type: MongoDB
        <br />
        Database version: 3.4
        <br />
        Package: dds.mongo.mid
        <br />
        Storage space: 10GB
        <br />
        Replication factor: 3
        <br />
        Region: East China 1
      </Descriptions.Item>
    </Descriptions>
  </div>
);

export default AdminConponent;
